<template>
    <Transition>
        <div class="y-feedback_moke" v-show="feedback.show.value">
            <div class='y-feedback'>
                <VIcon class="close" @click="feedback.close">mdi mdi-close</VIcon>
                <!-- <h3>FEEDBACK</h3> -->
                <h3>{{ $t('message.feedback.a') }}</h3>
                <p class="c-title-5 c-clor my-2">
                    <!-- <span>We just get started.</span><br /> -->
                    <span>{{ $t('message.feedback.b') }}</span><br />
                    <!-- <span>Willing to hear from you!</span> -->
                    <span>{{ $t('message.feedback.c') }}</span>
                </p>
                <input :class="isOk[0] ? '' : 'notOk'" @focus="isOk[0] = true" type="email"
                    :placeholder="$t('message.feedback.d')" v-model="email">
                <input :class="isOk[1] ? '' : 'notOk'" @focus="isOk[1] = true" type="text"
                    :placeholder="$t('message.feedback.e')" maxlength="20" v-model="name">
                <textarea :class="isOk[2] ? '' : 'notOk'" @focus="isOk[2] = true" cols="30" rows="10"
                    :placeholder="$t('message.feedback.f')" maxlength="300" v-model="message"></textarea>
                <div class="btn py-1 c-title-3" @click="submit">{{ $t('message.feedback.g') }}</div>
                <img class="logo" draggable="false" :src="Logo" />
            </div>
        </div>
    </Transition>
</template>
<script lang='ts' setup>
import Logo from "@/assets/share_tlogo.png"
import { URL_FEEDBACK } from "@/comm/api";
import { post } from "@/comm/request";
import { useUser } from "@/stores/user";
import { ref, watch } from "vue";
import { Notify } from "../y-notify/script";
import { feedback } from './script/feedback';
interface RES {
    success: boolean;
}
interface UserInfo {
    id: number;
    userType: number;
    userName: string;
    email: string;
    recommendCode: string;
    energy: number;
    regTime: number;
    twitterBound: number;
    telegramBound: number;
}
const user = useUser();
const email = ref('');
const name = ref('');
const message = ref('');
const isOk = ref<boolean[]>([true, true, true]);
watch(() => user.info, (info: UserInfo) => {
    email.value = info.email;
    name.value = info.userName;
    // console.log('yzt用户信息更新', toRaw(info));
})
watch(feedback.show, (show) => {
    isOk.value = [true, true, true];
    if (show && user.info) {
        email.value = user.info.email;
        name.value = user.info.userName;
    }
    // console.log('yzt_显示', show);
});
function submit() {
    const isemail = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g).test(email.value);
    if (!isemail) isOk.value[0] = false;
    if (!(name.value.length > 0)) isOk.value[1] = false;
    if (!(message.value.length > 0)) isOk.value[2] = false;
    if (isOk.value.every(isok => isok) === true) {
        submitFeedback();
    }
}
async function submitFeedback() {
    const res: RES = await post(URL_FEEDBACK, {
        "name": name.value,
        "email": email.value,
        "message": message.value,
    }, true);
    if (res.success) {
        Notify.alert("feedback success!");
        feedback.close();
        email.value = '';
        name.value = '';
        message.value = '';
    } else {
        Notify.alert("feedback error!", "warning")
    }
    // console.log('yzt提交反馈返回结果', res);
}

</script>
<style lang='less' scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}


.y-feedback_moke {
    z-index: 121;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.notOk {
    border: 0.1px solid var(--lose) !important;
}

.y-feedback {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    width: 450px;
    min-height: 400px;
    border-radius: 4px;
    padding: calc(var(--space) * 2);
    background-color: var(--card);
    text-align: center;

    .close {
        position: absolute;
        top: var(--space);
        right: var(--space);
    }

    input {
        padding-block: 4px;
    }

    textarea {
        min-height: 10vh;
        max-height: 50vh;
    }

    input,
    textarea {
        text-indent: 5px;
        font-size: 14px;
        border: var(--border) 1px solid;
        width: 100%;
        margin-top: var(--space);

        &:focus {
            outline: none;
        }
    }

    .btn {
        user-select: none;
        width: 100%;
        color: black;
        margin-top: var(--space);
        background-color: var(--main);

        &:active {
            scale: 0.95;
            transition: all 250ms ease;
        }
    }

    .logo {
        margin-top: calc(var(--space) * 2);
        width: 40%;
    }
}</style>